//
//  ModelDemo.swift
//  SwiftUIDemo
//
//  Created by Tilt Wang on 2025/7/3.
//

import SwiftUI

struct UserModel: Identifiable {
    let id: String = UUID().uuidString
    let displayName: String
    let userName: String
    let followerCount: Int
    let isVerified: Bool
}

struct ModelDemo: View {
    
//    @State var users: [String] = [
//        "Nick", "Emily", "Samantha", "Chris"
//    ]
    
    @State var users: [UserModel] = [
        UserModel(displayName: "Nick", userName: "nick123", followerCount: 4, isVerified: true),
        UserModel(displayName: "Emily", userName: "Emily43", followerCount: 3234, isVerified: false),
        UserModel(displayName: "Samantha", userName: "Samantha22", followerCount: 2434, isVerified: false),
        UserModel(displayName: "Chris", userName: "Chris55", followerCount: 454, isVerified: true)
    ]
    
    var body: some View {
        
        NavigationView {
            List {
                ForEach(users) { user in
                    HStack {
                        Circle()
                            .frame(width: 35, height: 35)
                        VStack {
                            Text(user.displayName)
                            Text("@\(user.userName)")
                                .foregroundColor(.gray)
                                .font(.caption)
                        }
                        Spacer()
                        if user.isVerified {
                            Image(systemName: "checkmark.seal.fill")
                                .foregroundColor(.blue)
                        }
                        VStack {
                            Text("\(user.followerCount)")
                                .font(.headline)
                            Text("followers")
                                .foregroundColor(.gray)
                                .font(.caption)
                        }
                    }
                    .padding(.vertical, 10)
                }
//                ForEach(users, id: \.self) { name in
//                    HStack {
//                        Circle()
//                            .frame(width: 35, height: 35)
//                        Text(name)
//                    }
//                    .padding(.vertical, 10)
//                }
                .listStyle(InsetGroupedListStyle())
                .navigationTitle("Users")
            }
        }
    }
}

#Preview {
    ModelDemo()
}
